{"id":1514,"date":"2018-04-07T23:14:28","date_gmt":"2018-04-07T21:14:28","guid":{"rendered":"http:\/\/yarogniew.net\/arduino\/?p=1514"},"modified":"2018-04-09T00:22:30","modified_gmt":"2018-04-08T22:22:30","slug":"api","status":"publish","type":"post","link":"http:\/\/adsl_zapas.dkonto.pl\/index.php\/api\/","title":{"rendered":"Praca z API"},"content":{"rendered":"

\u22a5\u0179r\u00f3d\u0142o:10.5: Working with APIs in Javascript – p5.js Tutorial<\/a><\/p>\n

Najpierw rejestrujemy si\u0119 na stronie:<\/em>\u00a0https:\/\/sunrise-sunset.org\/api<\/a> i pobieramy API ID.<\/em><\/p>\n

Link dzi\u0119ki kt\u00f3remu \u015bci\u0105gamy dane w formacie JSON:<\/em>
\n<\/strong>http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=Gdynia,pl&APPID=79af02db1af757d0b6d17411ebfdd728&units=metric&lang=pl<\/span><\/p>\n

\u015aci\u0105gni\u0119te dane dla miasta Gdynia wygl\u0105daj\u0105 tak:<\/em>
\n{“coord”:{“lon”:18.54,”lat”:54.52},”weather”:[{“id”:800,”main”:”Clear”,”description”:”clear sky”,”icon”:”01n”}],”base”:”stations”,”main”:{“temp”:284.15,”pressure”:1019,”humidity”:40,”temp_min”:284.15,”temp_max”:284.15},”visibility”:10000,”wind”:{“speed”:4.1,”deg”:160},”clouds”:{“all”:0},”dt”:1523133000,”sys”:{“type”:1,”id”:5349,”message”:0.0039,”country”:”PL”,”sunrise”:1523073692,”sunset”:1523122509},”id”:3099424,”name”:”Gdynia”,”cod”:200}<\/p>\n

Aby przejrze\u0107 je w bardziej czytelnej formie przyda si\u0119 rozszerzenie JSON. Podaj\u0119 dla Safari, ale s\u0105 te\u017c dla Chrome i Firefox\u00a0<\/em>
\nSafari JSON extension: https:\/\/github.com\/rfletcher\/safari-json-formatter\/downloads<\/a><\/p>\n

Kod p5.js<\/p>\n

<\/pre>\r\nvar weather;\r\n\r\nvar api = 'http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=';\r\nvar apiKey = '&APPID=79af02db1af757d0b6d17411ebfdd728';\r\nvar units = '&units=metric';\r\n\r\nvar input;\r\n\r\nfunction setup() {\r\ncreateCanvas(400, 200);\r\n\r\nvar button = select('#submit');\r\nbutton.mousePressed(weatherAsk);\r\n\r\ninput = select('#city');\r\n}\r\n\r\nfunction weatherAsk() {\r\nvar url = api + input.value() + apiKey + units;\r\nloadJSON(url, gotData);\r\n}\r\n\r\nfunction gotData(data) {\r\nweather = data;\r\n}\r\n\r\nfunction draw() {\r\nbackground(100);\r\nif (weather) {\r\nvar temp = weather.main.temp;\r\nvar humidity = weather.main.humidity;\r\nconsole.log(temp, humidity);\r\nfill(255);\r\ntextSize(20);\r\ntext(input.value(), 50, 50);\r\ntext("temperatura = "+temp+"\u00b0C", 50, 100);\r\ntext("wilgotno\u015b\u0107 = "+humidity+"%", 50, 150);\r\n\/\/ellipse(100, 100, temp, temp);\r\n\/\/ellipse(300, 100, humidity, humidity);\r\n}\r\n}\r\n<pre><\/pre>\n
Kod HTML<\/p>\n
<\/pre>\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>8.6_p5.js_api_query_user_input<\/title>\r\n<script src="libraries\/p5.js" type="text\/javascript"><\/script>\r\n\r\n<script src="libraries\/p5.dom.js" type="text\/javascript"><\/script>\r\n<script src="libraries\/p5.sound.js" type="text\/javascript"><\/script>\r\n\r\n<script src="sketch.js" type="text\/javascript"><\/script>\r\n\r\n<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>\r\nCity: <input id ="city" value="Gdynia"><\/input>\r\n<br\/>\r\n<button id="submit">submit<\/button>\r\n<\/p>\r\n<\/body>\r\n<\/html>\r\n<pre><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u22a5\u0179r\u00f3d\u0142o:10.5: Working with APIs in Javascript – p5.js Tutorial Najpierw rejestrujemy si\u0119 na stronie:\u00a0https:\/\/sunrise-sunset.org\/api i pobieramy API ID. Link dzi\u0119ki kt\u00f3remu \u015bci\u0105gamy dane w formacie JSON: http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=Gdynia,pl&APPID=79af02db1af757d0b6d17411ebfdd728&units=metric&lang=pl \u015aci\u0105gni\u0119te dane dla…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[51],"tags":[57,53],"class_list":["post-1514","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-api","tag-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t